<template>
    <div class="admin-skeleton">
        <div class="admin-header" :class="{'height-header':props.headerIsHeight}">
            <slot name="header"></slot>
        </div>
        <div class="admin-control">
            <slot name="control"></slot>
        </div>
        <div class="admin-content" :class="{'short-content':props.headerIsHeight}">
            <slot name="content"></slot>
        </div>
    </div>
</template>

<script setup>
import {defineProps} from 'vue'

let props = defineProps({
    headerIsHeight: {
        type: Boolean,
        default: false
    }
})

</script>

<style lang="less" scoped>
    .admin-skeleton {
        width: 100%;
        height: 100%;
        .admin-header{
            width: 100%;
            height: 5%;
            border-bottom: solid 1px #ccc;
            padding-left: .625rem;
        }
        .admin-control{
            width: 100%;
            height: 4%;
            border-bottom: solid 1px #ccc;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-left: .625rem;
        }
        .admin-content{
            width: 100%;
            height: 91%;
            padding: .625rem;
            // overflow: scroll;
        }
        .height-header{
            width: 100%;
            height: 8%;
            border-bottom: solid 1px #ccc;
            padding-left: .625rem;
        }
        .short-content{
            width: 100%;
            height: 88%;
            padding: .625rem;
        }

    }
</style>
